<template>
	<view class="address-page">
		<view v-if="addressList.length === 0" class="empty-box">
			<image class="empty-img" src="/static/mine/empty-address.jpg" mode="widthFix" />
			<view class="empty-text">暂无设置收货地址~</view>
		</view>
		<view v-else class="address-list">
			<view class="address-card" v-for="item in addressList" :key="item.addressId">
				<view class="address-header">
					<view v-if="item.isDefault" class="default-tag">默认</view>
					<view class="address-region">{{ item.province + item.city + item.district + item.street }}</view>
					<image class="edit-icon" src="/static/mine/edit.jpg" mode="aspectFit" @tap="editAddress(item)" />
				</view>
				<view class="address-detail">{{ item.detail }}</view>
				<view class="address-footer">
					<view class="address-user">{{ item.contacts }} {{ formatPhone(item.contactsPhone) }}</view>
					<image class="delete-icon" src="/static/mine/delete.png" mode="aspectFit" @tap="deleteAddress(item)" />
				</view>
			</view>
		</view>
		<view class="add-btn-box">
			<button class="add-btn" @tap="addAddress">
				<text class="plus">+</text> 新增收货地址
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { addressApi } from '../../api'

// 测试数据
const addressList = ref([])

// 预留接口：获取地址列表
const getAddressList = async () => {
	const token = uni.getStorageSync('token')
	const res = await addressApi.getAddressList(token)
	console.log("res:", res)
	if (res.code === 200) {
		addressList.value = res.data
	}else{
		uni.showToast({
			title: res.msg,
			icon: 'none'
		})
	}
}

const formatPhone = (phone) => {
	if (!phone) return ''
	return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

const addAddress = () => {
	uni.navigateTo({
		url: '../mine/address-edit?addressId=0'
	})
}
const editAddress = (item) => {
	uni.navigateTo({
		url: '../mine/address-edit?addressId=' + item.addressId
	})
}
const deleteAddress = async (item) => {
	uni.showModal({
		title: '提示',
		content: '确定要删除该地址吗？',
		success: async (res) => {
			if (res.confirm) {
				try {
					const result = await addressApi.deleteAddress(item.addressId)
					if (result.code === 200) {
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
						// 刷新地址列表
						await getAddressList()
					} else {
						uni.showToast({
							title: result.msg || '删除失败',
							icon: 'none'
						})
					}
				} catch (error) {
					uni.showToast({
						title: '删除失败，请重试',
						icon: 'none'
					})
				}
			}
		}
	})
}

onMounted(() => {
	getAddressList()
	// 监听刷新事件
	uni.$on('refreshAddressList', () => {
		getAddressList()
	})
})

// 组件卸载时移除事件监听
onUnmounted(() => {
	uni.$off('refreshAddressList')
})
</script>

<style lang="scss" scoped>
.address-page {
	min-height: 100vh;
	background: #f5f5f5;
	padding-bottom: 100rpx;
}
.empty-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 70vh;
}
.empty-img {
	width: 180rpx;
	margin-top: 120rpx;
	margin-bottom: 32rpx;
	opacity: 0.7;
}
.empty-text {
	color: #bbb;
	font-size: 26rpx;
}
.address-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
	margin: 0 16rpx;
	padding: 24rpx 0 40rpx 0;
}
.address-card {
	background: #fff;
	border-radius: 18rpx;
	box-shadow: 0 2rpx 12rpx rgba(44, 62, 80, 0.08);
	display: flex;
	flex-direction: column;
	padding: 24rpx 20rpx 18rpx 24rpx;
	position: relative;
}
.address-header {
	display: flex;
	align-items: center;
	margin-bottom: 8rpx;
}
.default-tag {
	background: #2196f3;
	color: #fff;
	font-size: 22rpx;
	border-radius: 8rpx;
	padding: 2rpx 14rpx;
	margin-right: 10rpx;
}
.address-region {
	font-size: 24rpx;
	color: #888;
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.edit-icon {
	width: 32rpx;
	height: 32rpx;
	margin-left: 8rpx;
	opacity: 0.7;
}
.address-detail {
	font-size: 28rpx;
	color: #222;
	font-weight: 600;
	margin-bottom: 10rpx;
}
.address-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.address-user {
	font-size: 22rpx;
	color: #888;
}
.delete-icon {
	width: 32rpx;
	height: 32rpx;
	opacity: 0.7;
}
.add-btn-box {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 24rpx;
	background: #f5f5f5;
	z-index: 10;
	display: flex;
	justify-content: center;
	padding-bottom: env(safe-area-inset-bottom);
}
.add-btn {
	width: 90vw;
	max-width: 700rpx;
	background: #2196f3;
	color: #fff;
	font-size: 28rpx;
	border-radius: 40rpx;
	border: none;
	height: 80rpx;
	line-height: 80rpx;
	font-weight: 500;
	box-shadow: none;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.plus {
	font-size: 36rpx;
	margin-right: 10rpx;
}
</style>
